<template>
  <div>
    <list v-show="paneValue=='a'" @router-pane="getPaneValue" ref="listPane"/>
    <detail v-show="paneValue=='b'" @router-pane="getPaneValue" ref="detailPane"/>
  </div>
</template>

<script>

    import Detail from './Details'
    import List from './List';

    export default {
        name: "Tabs",
        components:{Detail,List},
        data() {
            return {
                paneValue: 'a',
                heightTable : document.documentElement.clientHeight,
                isManager:false,
            }
        },
        mounted() {
            //获取高度值
            window.onresize = () => {
                this.heightTable = document.documentElement.clientHeight;
                this.getPaneValue();
            }
        },
        watch:{
            //监听路由变化，用于判断是查看还是管理实习生系统
            $route(to,from){
                if(to.fullPath==='/internship/manager'||to.fullPath==='/internship/query'){
                    console.log("路由变化监听",this.$data, this.$options.data())
                    Object.assign(this.$data, this.$options.data());
                }
            }
        },
        methods:{
            getPaneValue(paneValue,id,isDisable){
                if(paneValue==null&&id==null&&isDisable==null){
                    return;
                }
                if(paneValue!=null){
                    this.paneValue = paneValue;
                }
                if(this.paneValue=='a'){
                    this.$nextTick(()=>{
                        this.$refs.listPane.init();
                        this.$refs.listPane.initLoadHeight(this.heightTable)
                    })
                }else if(this.paneValue=='a'){
                    this.$nextTick(()=>{
                        if(paneValue!=null){
                            this.$refs.detailPane.getId(id,isDisable);
                        }
                        this.$refs.detailPane.active();
                        this.$refs.detailPane.initLoadHeight(this.heightTable)
                    })
                }
            },
        },created() {

        }
    }
</script>

<style scoped>

  body{
    background-color: white;
  }

</style>